.u-sp{ background:url(../image/sprite.png) 9999px 9999px no-repeat;}

@import 'base';
@import 'mixins';
@import 'selectShow';
@import 'dialog';

/* 页面样式 */
body{
	background-color:#fff;
	min-width:960px;
}
.g-main{
	width: 960px; margin: 0 auto; text-align: left;
}

.m-header{
	.g-main{
		width:650px;
		height:120px;
	}

	.logo{
		top:50%;
		left:50%;
		width:188px;
		height:22px;
		margin:-11px 0 0 -94px;
	}

	.links{
		height:22px;
		width:200px;
		padding:49px 0;

		a.link{
			color:#4a4a4a;
			margin:0 15px;
			font-size:14px;
			line-height:22px;

			&:hover{
				color:#f48974;
			}
		}
	}
}

.m-funcs{
	height:425px;

	.item{
		padding:80px 30px 0 30px;
		width:260px;

		.ic{
			width:128px;
			height:128px;
			margin:0 auto;

			&.f1{
				background:url(../image/funs_1.jpg);
			}
			&.f2{
				background:url(../image/funs_2.jpg);
			}
			&.f3{
				background:url(../image/funs_3.jpg);
			}
		}

		.nm{
			padding:17px 0 15px 0;
			text-align:center;
			color:#333;
			font-size:15px;
			line-height:1;
		}

		.txt{
			font-size:14px;
			line-height:22px;
			color:#9b9b9b;
			text-align:center;
		}
	}
}

.m-act{
	height:847px;

	.midbg{
		width:100%;
		height:100%;
		z-index:1;
		background:url(../image/mid_bg.jpg) center top;

		.topbg{
			top:-21px;
			left:0;
			width:100%;
			height:21px;
			background:url(../image/mid_top_bg.png) center top;
		}

		.bottombg{
			bottom:-21px;
			left:0;
			width:100%;
			height:21px;
			background:url(../image/mid_bottom_bg.png) center top;
		}
	}

	.g-main{
		z-index:10;
	}

	.tit{
		padding-top:95px;
		text-align:center;
		font-size:22px;
		line-height:55px;
		color:#212121;
	}

	.line{
		height:2px;
		width:64px;
		background-color:#000;
		margin:0 auto;
	}

	.itemwrap{
		padding:40px 0 30px 0;
		width:960px;

		.item{
			margin:12px 13px 13px 12px;
			background-color:#000;
			overflow:hidden;

			.pic{
				width:100%;
			}

			.inner{
				width:100%;
				height:215px;
				top:215px;
				@include opacity(0);
				@include transition(all, 0.3s, ease-in-out, 0s);

				.innerbg{
					top:0;
					left:0;
					width:100%;
					height:100%;
					background-color:#f49874;
					@include opacity(88);
				}

				.innerbox{
					width:100%;
					bottom:20px;
					left:0px;

					.tit{
						padding:0 20px;
						color:#fff;
						font-size:16px;
						line-height:40px;
						text-align:left;
					}

					p{
						padding:0 20px;
						color:#fff;
						font-size:14px;
						line-height:16px;
					}
				}

			}

			&:hover{
				.inner{
					@include opacity(100);
					top:0;
				}
			}

			&.small{
				width:215px;
				height:215px;
			}

			&.big{
				width:455px;
				height:215px;
			}
		}
	}

	.morebtn{
		display:block;
		width:120px;
		height:30px;
		background-color:#F48974;
		color:#fff;
		@include border-radius(15px);
		margin:0 auto;
		text-align:center;;
		font-size:13px;
		line-height:30px;
	}
}

.m-video{
	background-color:#f8f8f8;

	.thes{
		height:122px;
		padding-top:75px;

		.item{
			width:295px;
			height:122px;
			background-color:#fff;
			margin:0 12px;

			.ic{
				width:295px;
				height:122px;

				&.i1{ background:url(../image/the_1.png);}
				&.i2{ background:url(../image/the_2.png);}
				&.i3{ background:url(../image/the_3.png);}
			}
			
		}
	}

	.video{
		padding:64px 0;
		height:540px;
		width:100%;

		.fbox{
			background-color:#000;
			width:100%;
			height:100%;

			.flashbox{
				top:0;
				left:0;
				width:100%;
				height:100%;
			}

			.cover{
				top:0;
				left:0;
				width:100%;
				height:100%;
				background:url(../image/video_cover.jpg);
			}

			.playbtn{
				top:50%;
				left:50%;
				width:64px;
				height:66px;
				margin:-33px 0 0 -32px;
				@extend .u-sp;
				background-position:-1px -15px;
			}
		}

		
	}

	.users{
		padding-bottom:55px;

		.item{
			width:295px;
			margin:0 12px;

			.box{
				height:210px;
				background-color:#fff;
				@include border-radius(10px);
				padding:40px;

				h5{
					color:#333;
					font-size:16px;
					line-height:40px;
				}

				p{
					color:#999;
					line-height:22px;
				}
			}

			.arr{
				margin:0 auto;
				width:26px;
				height:18px;
				@extend .u-sp;
				background-position:-174px 0;
			}

			.face{
				margin:10px auto;
				padding:4px;
				width:90px;
				height:90px;
				background-color:#fff;
				@include border-radius(47px);

				img{
					@include border-radius(45px);
					width:90px;
					height:90px;
				}
			}
			
		}
	}
}

.m-footer{
	background-color:#535057;
	height:323px;

	.links{
		text-align:center;
		height:22px;
		padding:60px 0 15px 0;

		a.link{
			color:#fff;
			margin:0 15px;
			font-size:14px;
			line-height:22px;

			&:hover{
				color:#f48974;
			}
		}
	}

	.cp{
		text-align:center;
		color:#fff;
		font-size:13px;
		padding:15px 0;
	}

	.share{
		height:48px;
		text-align:center;
		padding-top:35px;

		.sbtn{
			margin:0 20px;
			width:48px;
			height:48px;
			@extend .u-sp;

			&.weixin{ background-position:-1px -88px;}
			&.weibo{ background-position:-91px -88px;}
		}
	}
}

.m-qrcodedialog{
	background-color:#F48974;
	width:500px;
	height:300px;

 	.close{
 		@extend .u-sp;
 		width:14px;
 		height:14px;
 		top:10px;
 		right:10px;
 		background-position:-186px -26px
 	}

 	.qrcodewrap{

 		.qr{ 
 			width:135px;
 			height:135px;
 			padding:30px 0 40px 0;
 			margin:0 auto;

 			img{
 				width:100%;
 				height:100%;
 			}
 		}

 		.txt{
 			height:95px;
 			text-align:center;
 			background-color:#fff;
 			line-height:30px;
 			font-size:14px;
 			color:#333;
 			padding-top:16px;

 			.arr{
 				@extend .u-sp;
 				background-position:-126px 0;
 				width:24px;
 				height:20px;
 				top:-20px;
 				left:50%;
 				margin-left:-12px;
 			}
 		}

 	}
}